<template>
	<view class="order-info-container">
		<view class="order-info-title">
			订单信息
		</view>
		<view class="order-info-item">
			<view class="order-info-label">
				订单号
			</view>
			<view class="order-info-value">
				{{ formData.orderId }}
			</view>
		</view>
		<view class="order-info-item">
			<view class="order-info-label">
				手机号
			</view>
			<view class="order-info-value">
				{{ formData.userPhone || '' }}
			</view>
		</view>
		<view class="order-info-item">
			<view class="order-info-label">
				下单时间
			</view>
			<view class="order-info-value">
				{{ formData.createTime }}
			</view>
		</view>
		<view class="order-info-item" v-if="isPayTime">
			<view class="order-info-label">
				付款时间
			</view>
			<view class="order-info-value">
				{{ formData.payTime }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			formData: {
				type: Object,
				default: () => ({ orderId: '' })
			},
			isPayTime: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style scoped>
.order-info-container {
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-top: 20rpx;
}

.order-info-title {
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.order-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.order-info-label {
  font-size: 28rpx;
  color: #666666;
  width: 130rpx;
}

.order-info-value {
  font-size: 28rpx;
  color: #333333;
}
</style>
